<template>
  <div class="category">
    <ul>
      <li @click="btnHandle">这是第1个li</li>
      <li>这是第2个li</li>
      <li>这是第3个li</li>
      <li>这是第4个li</li>
      <li>这是第5个li</li>
      <li>这是第6个li</li>
      <li>这是第7个li</li>
      <li>这是第8个li</li>
      <li>这是第9个li</li>
      <li>这是第10个li</li>
      <li>这是第11个li</li>
      <li>这是第12个li</li>
      <li>这是第13个li</li>
      <li>这是第14个li</li>
      <li>这是第15个li</li>
      <li>这是第16个li</li>
      <li>这是第17个li</li>
      <li>这是第18个li</li>
      <li>这是第19个li</li>
      <li>这是第20个li</li>
      <li>这是第21个li</li>
      <li>这是第22个li</li>
      <li>这是第23个li</li>
      <li>这是第24个li</li>
      <li>这是第25个li</li>
      <li>这是第26个li</li>
      <li>这是第27个li</li>
      <li>这是第28个li</li>
      <li>这是第29个li</li>
      <li>这是第30个li</li>
      <li>这是第31个li</li>
      <li>这是第32个li</li>
      <li>这是第33个li</li>
      <li>这是第34个li</li>
      <li>这是第35个li</li>
      <li>这是第36个li</li>
      <li>这是第37个li</li>
      <li>这是第38个li</li>
      <li>这是第39个li</li>
      <li>这是第40个li</li>
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  export default {
    name: "Category",
    mounted(){
      const scroll = new BScroll(document.querySelector('.category'),{
        probeType: 3,
        pullUpLoad: true,
        click: true
      });

      scroll.on('scroll', (position) => {
        console.log(position)
      });

      scroll.on('pullingUp', () => {
        console.log('上拉加载更多')
      })
    },
    methods: {
      btnHandle(){
        console.log('ok')
      }
    }
  }
</script>

<style scoped>
  .category{
    height: 200px;
    background-color: red;
    overflow: hidden;
  }
</style>
